<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <!-- 引入在线资源 -->
    <script src="./g2.min.js"></script>
</head>

<body>
    <div id="c1">

    </div>
    <script>
        // 1. 创建Chart对象
        let chart = new G2.Chart({
            id: 'c1',
            width: 600,
            height: 300
        })
        // 2. 载入数据源
        chart.source([{name: 'circle', percent: 1}]);
        chart.coord('polar',{
            inner: 0.15
        }).transpose();
        chart.tooltip(false);
	    chart.legend(false);
        // 3.创建图形语法，
        chart.interval().position('name*percent').color('#f1efeb').opacity(1);
        chart.changeData([{name:'cricle',percent:1}]);
        let chart2 = chart.createView();
        let data2 = [
            {color:"#68d3b1"},
            { name:"容量"},
            {value:0.001}
        ]
        chart2.source(data,{
            value: {
                min: 0,
                max: 1
            }
        })
        chart2.coord('polar',{
            inner: 0.15
        }).transpose();
        chart2.tooltip(false);
        this.chart2.interval().position('name*value').color('color',function(){
    	    if(data.length>0){
    	        return data[0].color
    	    }
    	}).opacity(1);

        chart.render();  
    </script>
</body>

</html>